import React, { Component } from "react";
import { View, Text, Image, StyleSheet, TouchableWithoutFeedback, FlatList } from "react-native";
import CustomerHeader from "../../widget/customerHeader";

export default class CommentList extends Component{
  constructor(props) {
    super(props);
    this.state={
      showImg:false,
      type:1,//1:收到的赞，2：收到评论
      dataList:[{
        value:1,
        label:1
      },{
        value:2,
        label:2
      },{
        value:3,
        label:3
      },{
        value:4,
        label:4
      }]
    }
  }
  _renderItem=(info)=>{
    return(
      <TouchableWithoutFeedback>
        <View style={styles.cell}>
          <Image style={styles.portrait} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}}></Image>
          <View style={styles.info}>
            <Text style={styles.name}>兔子爱吃胡萝卜</Text>
            <Text style={styles.message}>{this.state.type==1?'赞了你的作品':'评论了你的动态'} <Text style={styles.time}>  3分钟前</Text></Text>
            <Text style={styles.commentDes}>可以可以，谢谢分享。</Text>
          </View>
          {this.state.showImg?<Image style={styles.pic} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}}></Image>:
            <Text style={styles.des} numberOfLines={3}>我更喜欢过 无人问津的 日子</Text>
          }
        </View>
      </TouchableWithoutFeedback>
    )
  }
  render(){
    return (
      <View style={{flex:1,backgroundColor:'#fff'}}>
        <CustomerHeader showLine={true} title={'收到的赞'} leftOnPress={()=>{this.props.navigation.pop()}}></CustomerHeader>
        <FlatList data={this.state.dataList}
                  renderItem={this._renderItem}
                  keyExtractor={item => item.value}>
        </FlatList>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  cell:{
    position: 'relative',
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    paddingHorizontal:15,
    paddingVertical:18
  },
  portrait:{
    width:45,
    height:45,
    borderRadius: 22.5
  },
  info:{
    flex:1,
    marginLeft:9
  },
  flex:{
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  name:{
    color:'#000000',
    fontSize: 15
  },
  message:{
    color:'#9B9B9B',
    fontSize:13,
    marginTop:8
  },
  pic:{
    width: 48,
    height:48
  },
  des:{
    width:57,
    height:47
  },
  time:{
    color:'#BCBCBC',
    fontSize:13,
    paddingLeft:20
  },
  commentDes:{
    color:'#1C1C1C',
    fontSize:15,
    marginTop: 18
  }
})
